<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="renderer" content="webkit" />
    <title>我的书房</title>
    <link th:href="@{favicon.ico}" rel="shortcut icon" />
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet" />
    <link th:href="@{/css/font-awesome.min.css}" rel="stylesheet" />
    <link th:href="@{/css/style.min.css}" rel="stylesheet" />
    <link th:href="@{/css/skins-red.css}" rel="stylesheet" />
    <link th:href="@{/ruoyi/css/ry-ui.css}" rel="stylesheet" />
    <style>
      body {
        background-color: #f5f5f5;
        font-family: "Microsoft YaHei", sans-serif;
        padding: 15px 0;
      }

      .page-header {
        background: linear-gradient(135deg, #7a0000, #c00);
        color: #fff;
        padding: 15px 20px;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        margin-bottom: 20px;
        text-align: center;
      }

      .page-title {
        font-size: 24px;
        font-weight: bold;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
        margin: 0;
      }

      .page-subtitle {
        font-size: 14px;
        opacity: 0.9;
        margin-top: 5px;
      }

      .search-box {
        background: #fff;
        padding: 15px;
        border-radius: 6px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        margin-bottom: 20px;
        border: 1px solid #eee;
      }

      .search-form {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        align-items: center;
      }

      .search-item {
        display: flex;
        align-items: center;
        margin-bottom: 0;
      }

      .search-item label {
        margin-bottom: 0;
        font-weight: normal;
        color: #333;
        margin-right: 8px;
        font-size: 13px;
        white-space: nowrap;
      }

      .search-item .form-control {
        width: 150px;
        height: 32px;
        font-size: 13px;
        padding: 5px 10px;
      }

      .search-buttons {
        display: flex;
        gap: 8px;
        margin-left: auto;
      }

      .btn-search,
      .btn-reset {
        padding: 5px 12px;
        font-size: 13px;
        border-radius: 4px;
      }

      .btn-search {
        background: linear-gradient(135deg, #7a0000, #c00);
        color: white;
        border: none;
      }

      .btn-search:hover {
        background: linear-gradient(135deg, #c00, #7a0000);
        box-shadow: 0 2px 6px rgba(139, 0, 0, 0.2);
      }

      .btn-reset {
        background: #f8f9fa;
        color: #333;
        border: 1px solid #ddd;
      }

      .btn-reset:hover {
        background: #e9ecef;
      }

      .book-shelf {
        background: #fff;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        margin-bottom: 20px;
        border: 1px solid #eee;
      }

      .shelf-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 1px solid #eee;
      }

      .shelf-title {
        font-size: 18px;
        font-weight: bold;
        color: #333;
        margin: 0;
      }

      .shelf-stats {
        font-size: 13px;
        color: #666;
      }

      .book-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 20px;
      }

      .book-card {
        background: #fff;
        border-radius: 6px;
        overflow: hidden;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
        transition: all 0.2s ease;
        border: 1px solid #eee;
        height: 100%;
        display: flex;
        flex-direction: column;
      }

      .book-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
        border-color: #c00;
      }

      .book-cover {
        width: 100%;
        height: 120px;
        object-fit: cover;
        border-bottom: 1px solid #eee;
      }

      .book-info {
        padding: 12px;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
      }

      .book-title {
        font-size: 14px;
        font-weight: bold;
        color: #333;
        margin-bottom: 6px;
        line-height: 1.4;
        flex-grow: 1;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .book-author {
        color: #7a0000;
        font-size: 12px;
        margin-bottom: 8px;
        font-weight: 500;
      }

      .book-meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: auto;
        padding-top: 8px;
        border-top: 1px solid #f5f5f5;
      }

      .read-count {
        color: #7a0000;
        font-size: 12px;
        font-weight: 500;
      }

      .book-actions {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        padding-top: 8px;
        border-top: 1px solid #f5f5f5;
      }

      .action-btn {
        background: none;
        border: none;
        color: #666;
        cursor: pointer;
        font-size: 12px;
        padding: 4px 6px;
        border-radius: 3px;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        gap: 3px;
      }

      .action-btn:hover {
        background-color: #f8f9fa;
        color: #7a0000;
      }

      .action-btn.active {
        color: #c00;
      }

      .action-btn i {
        font-size: 11px;
      }

      .empty-message {
        text-align: center;
        color: #999;
        padding: 40px 20px;
        grid-column: 1 / -1;
      }

      .comments-section {
        margin-top: 12px;
        border-top: 1px solid #f0f0f0;
        padding-top: 10px;
      }

      .comment {
        margin-bottom: 8px;
        padding: 6px;
        background-color: #f8f9fa;
        border-radius: 3px;
        font-size: 12px;
      }

      .comment-author {
        font-weight: 500;
        color: #7a0000;
        font-size: 11px;
        margin-bottom: 2px;
      }

      .comment-content {
        font-size: 12px;
        color: #333;
      }

      .comment-form {
        display: flex;
        margin-top: 8px;
        gap: 5px;
      }

      .comment-input {
        flex: 1;
        border: 1px solid #ddd;
        border-radius: 3px;
        padding: 4px 8px;
        font-size: 12px;
      }

      .comment-submit {
        background: linear-gradient(135deg, #7a0000, #c00);
        color: white;
        border: none;
        border-radius: 3px;
        padding: 4px 8px;
        font-size: 12px;
        cursor: pointer;
      }

      /* 响应式设计 */
      @media (max-width: 768px) {
        .book-grid {
          grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
          gap: 15px;
        }

        .search-form {
          flex-direction: column;
          align-items: flex-start;
        }

        .search-item {
          width: 100%;
        }

        .search-item .form-control {
          flex: 1;
        }

        .search-buttons {
          margin-left: 0;
          width: 100%;
          justify-content: center;
        }

        .page-title {
          font-size: 20px;
        }
      }
    </style>
  </head>
  <body class="gray-bg">
    <div class="container-fluid">
      <div class="page-header">
        <h1 class="page-title">我的书房</h1>
        <div class="page-subtitle">不忘初心 牢记使命</div>
      </div>

      <div class="search-box">
        <form id="searchForm">
          <div class="search-form">
            <div class="search-item">
              <label>书名：</label>
              <input
                type="text"
                class="form-control"
                name="title"
                placeholder="书名"
              />
            </div>
            <div class="search-item">
              <label>作者：</label>
              <input
                type="text"
                class="form-control"
                name="author"
                placeholder="作者"
              />
            </div>
            <div class="search-buttons">
              <button
                type="button"
                class="btn btn-search"
                onclick="searchBooks()"
              >
                <i class="fa fa-search"></i> 搜索
              </button>
              <button type="button" class="btn btn-reset" onclick="resetForm()">
                <i class="fa fa-refresh"></i> 重置
              </button>
            </div>
          </div>
        </form>
      </div>

      <div class="book-shelf">
        <div class="shelf-header">
          <h2 class="shelf-title"><i class="fa fa-book"></i> 我的藏书</h2>
          <div class="shelf-stats">共 <span id="bookCount">0</span> 本图书</div>
        </div>

        <div class="book-grid" id="bookContainer">
          <!-- 图书将通过JavaScript动态加载 -->
          <div class="empty-message" id="emptyMessage">
            <i class="fa fa-book fa-2x"></i>
            <p style="margin-top: 10px">暂无图书，请添加图书</p>
          </div>
        </div>
      </div>
    </div>

    <th:block th:include="include :: footer" />
    <script th:inline="javascript">
      // 模拟图书数据
      var mockBooks = [];

      // 页面加载完成后初始化
      document.addEventListener("DOMContentLoaded", function () {
        loadBooksData();
      });

      // 加载图书
      function loadBooks(books) {
        const container = document.getElementById("bookContainer");
        const emptyMessage = document.getElementById("emptyMessage");
        const bookCount = document.getElementById("bookCount");

        // 更新图书总数
        bookCount.textContent = books ? books.length : 0;

        if (!books || books.length === 0) {
          emptyMessage.style.display = "block";
          container.innerHTML = "";
          container.appendChild(emptyMessage);
          return;
        }

        emptyMessage.style.display = "none";

        // 清空现有内容
        container.innerHTML = "";

        // 添加图书卡片
        books.forEach((book) => {
          const bookCard = document.createElement("div");
          bookCard.className = "book-card";
          bookCard.innerHTML = `
                    <img src="${book.coverUrl}" alt="${
            book.title
          }" class="book-cover" onerror="this.src='/img/profile.jpg'">
                    <div class="book-info">
                        <h3 class="book-title">${book.title}</h3>
                        <div class="book-author">${book.author}</div>
                        <div class="book-meta">
                            <div class="read-count">
                                <i class="fa fa-eye"></i> ${book.readCount}
                            </div>
                            <button class="btn btn-default btn-xs" onClick="viewFile(${
                              book.id
                            })" style="padding: 2px 6px; font-size: 12px;">
                                阅读
                            </button>
                        </div>
                        <div class="book-actions">
                            <button class="action-btn ${
                              book.isFavorite ? "active" : ""
                            }" onclick="toggleFavorite(${book.id})">
                                <i class="fa fa-heart${
                                  book.isFavorite ? "" : "-o"
                                }"></i>
                            </button>
                            <button class="action-btn" onclick="toggleComments(${
                              book.id
                            })">
                                <i class="fa fa-comment-o"></i> (${
                                  book.comments.length
                                })
                            </button>
                        </div>
                        <div class="comments-section" id="comments-${
                          book.id
                        }" style="display: none;">
                            <div id="comments-list-${book.id}">
                                ${book.comments
                                  .map(
                                    (comment) => `
                                    <div class="comment">
                                        <div class="comment-author">${comment.author}</div>
                                        <div class="comment-content">${comment.content}</div>
                                    </div>
                                `
                                  )
                                  .join("")}
                            </div>
                            <div class="comment-form">
                                <input type="text" class="comment-input" id="comment-input-${
                                  book.id
                                }" placeholder="写评论...">
                                <button class="comment-submit" onclick="addComment(${
                                  book.id
                                })">发表</button>
                            </div>
                        </div>
                    </div>
                `;
          container.appendChild(bookCard);
        });
      }

      // 搜索图书
      function searchBooks() {
        const title = document
          .querySelector('input[name="title"]')
          .value.trim();
        const author = document
          .querySelector('input[name="author"]')
          .value.trim();

        // 过滤图书
        const filteredBooks = mockBooks.filter((book) => {
          const matchTitle = title ? book.title.includes(title) : true;
          const matchAuthor = author ? book.author.includes(author) : true;
          return matchTitle && matchAuthor;
        });

        loadBooks(filteredBooks);
      }

      // 重置表单
      function resetForm() {
        document.getElementById("searchForm").reset();
        loadBooks(mockBooks);
      }

      // 收藏/取消收藏图书
      function toggleFavorite(bookId) {
        const book = mockBooks.find((b) => b.id === bookId);
        if (book) {
          book.isFavorite = !book.isFavorite;
          loadBooks(mockBooks);
        }
      }

      // 显示/隐藏评论
      function toggleComments(bookId) {
        const commentsSection = document.getElementById(`comments-${bookId}`);
        if (commentsSection) {
          const isVisible = commentsSection.style.display === "block";
          commentsSection.style.display = isVisible ? "none" : "block";
        }
      }

      // 添加评论
      function addComment(bookId) {
        const commentInput = document.getElementById(`comment-input-${bookId}`);
        const commentText = commentInput.value.trim();

        if (commentText) {
          const book = mockBooks.find((b) => b.id === bookId);
          if (book) {
            // 模拟当前用户
            const newComment = {
              id: book.comments.length + 1,
              author: "我",
              content: commentText,
            };
            book.comments.push(newComment);
            commentInput.value = "";
            loadBooks(mockBooks);

            // 重新展开评论区域
            const commentsSection = document.getElementById(
              `comments-${bookId}`
            );
            if (commentsSection) {
              commentsSection.style.display = "block";
            }
          }
        }
      }

      function loadBooksData() {
        $.ajax({
          type: "post",
          url: ctx + "learn/redBook/list",
          data: {},
          cache: false,
          contentType: false,
          processData: false,
          dataType: "json",
          success: function (result) {
            if (result) {
              mockBooks = [];
              var bookArray = result.rows;
              for (var i = 0; i < bookArray.length; i++) {
                var book = bookArray[i];
                mockBooks.push({
                  id: book.id,
                  title: book.title,
                  author: book.author,
                  description: book.description,
                  coverUrl: ctx + book.coverUrl,
                  fileUrl: ctx + book.bookUrl,
                  readCount: book.readCount,
                  isFavorite: false,
                  comments: [],
                });
              }
              loadBooks(mockBooks);
            }
          },
          error: function (error) {},
        });
      }

      function viewFile(bookId) {
        var url = ctx + "learn/bookRoom" + "/view/" + bookId;
        $.modal.open("查看文件", url);
      }
    </script>
  </body>
</html>
